<template>
  <el-skeleton :loading="loading">
    <el-input placeholder="按教材章节搜索" prefix-icon="el-icon-search" clearable v-model="filterText" class="search-input" size="medium" />

    <el-tree
      class="knowledge-tree"
      ref="knowledgeRef"
      :data="dateset"
      show-checkbox
      node-key="id"
      :props="{ children: 'childs', label: 'name', value: 'id' }"
      :filter-node-method="filterNode"
      @check="checkChange"
    />
  </el-skeleton>
</template>

<script lang="ts">
import { ref, Ref, watch } from 'vue';
import $, { debounce } from '$'

export default {
  props: {
    subjectCode: String
  },
  emits: ['check-node-change', 'check-keys-change'],
  setup(props, { emit }) {
    let loading = ref(true);

    let dateset: Ref<any[]> = ref([]);
    (async () => {
      let res = await $.http.post('/tiku/bookVersion/queryVresionBookTree', { subject: props.subjectCode });
      dateset.value = res.json;
      loading.value = false;
    })();

    /* 搜索 */
    let filterText = ref(null);
    let knowledgeRef: Ref<any> = ref(null);
    const filterNode = (val, node) => (!val || node.name.includes(val));
    watch(filterText, debounce(() => knowledgeRef.value.filter(filterText.value) , 300))
    
    const checkChange = (target, { checkedNodes }) => {
      let nodes = checkedNodes.filter(i => !i.childs || !i.childs.length);
      emit('check-node-change', nodes);
      emit('check-keys-change', nodes.map(i => i.id));
    } 

    return { filterText, dateset, filterNode, knowledgeRef, checkChange, loading };
  }
}
</script>

<style lang="scss" scoped>
.search-input {
  margin-bottom: 12px;
}
.knowledge-tree {
  .el-tree-node__content {
    height: 32px !important;
  }
}
</style>
